<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BFC</title>

        <style type="text/css">
            .odd { background: #dedede ; }
            .even { background: rgb(255, 190, 69) ;}

            .wrapper { border: 5px solid blue ; }

            .first { 
                /*  当元素的 overflow 取值不是 visible 就会形成一个 BFC */
                overflow: hidden ;
            }

            .first>span { 
                /* 当内联元素浮动后，就类似于将该元素的 display 设置为 block */
                float: left ; /* 当元素浮动时就会形成一个 BFC */
                width: 25% ;  /* 内联元素浮动后其宽高都将生效 */
            }

            .first>span div { 
                width: 50% ;
                border-bottom: 2px solid red ; 
            }
        </style>
    </head>
    <body>

        <div class="wrapper first">
            <span class="odd">
                <div>11</div>
                <div>12</div>
                <div>13</div>
            </span>
            <span class="even">
                落霞与孤鹜齐飞，秋水共长天一色。
                落霞与孤鹜齐飞，秋水共长天一色。
                落霞与孤鹜齐飞，秋水共长天一色。
            </span>
            <span class="odd">
                <div>31</div>
                <div>32</div>
            </span>
            <span class="even">4</span>
        </div>
        
    </body>
</html>